<template>
  <div class="jobDetailsTable">
    <div class="jobDetailsTable_box">
      <van-tabs v-model:active="active" scrollspy sticky title-active-color="#ff5000" line-height="0px">
        <van-tab class="jobDetailsTable_box_item" v-for="(item, index) in tableInfo" :title="item.title">
          <div class="jobDetailsTable_box_item_title">
            <div class="jobDetailsTable_box_item_title_text">{{ item.title }}</div>
          </div>
          <div class="jobDetailsTable_box_item_table">
            <div class="jobDetailsTable_box_item_table_list" v-for="table in item.table">
              <div class="jobDetailsTable_box_item_table_list_left">{{ table.title }}</div>
              <div class="jobDetailsTable_box_item_table_list_right">{{ table.content }}</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const active = ref(0)

const props = defineProps({
  jobDetails: {
    type: Object,
    default: () => { }
  }
})

const tableInfo = ref([
  {
    id: 0,
    title: '挣多少钱',
    table: [{
      title: '综合薪资',
      content: props.jobDetails.bySalary ? props.jobDetails.bySalary.name : props.jobDetails.unitSalary + '元/小时'
    }, {
      title: '发薪周期',
      content: props.jobDetails.salaryCycle
    }, {
      title: '薪资结构',
      content: props.jobDetails.salaryMake
    }]
  },
  {
    id: 1,
    title: '干什么活',
    table: [{
      title: '工作内容',
      content: props.jobDetails.request
    }, {
      title: '工作时间',
      content: props.jobDetails.workTime
    }, {
      title: '工作地点',
      content: props.jobDetails.address
    }]
  },
  {
    id: 2,
    title: '福利待遇',
    table: [{
      title: '伙食情况',
      content: props.jobDetails.food
    }, {
      title: '住宿情况',
      content: props.jobDetails.room
    }, {
      title: '社保情况',
      content: props.jobDetails.socialSecurity
    }, {
      title: '公积金',
      content: props.jobDetails.providentFund
    }]
  },
  {
    id: 3,
    title: '招聘条件',
    table: [{
      title: '年龄要求',
      content: props.jobDetails.age
    }, {
      title: '性别要求',
      content: props.jobDetails.sex === '0' ? '男' : props.jobDetails.sex === '1' ? '女' : '男女不限'
    }, {
      title: '经验要求',
      content: props.jobDetails.shExperience ? props.jobDetails.shExperience : '不限'
    }, {
      title: '学历要求',
      content: props.jobDetails.shEducation ? props.jobDetails.shEducation : '不限'
    }, {
      title: '其他要求',
      content: props.jobDetails.other ? props.jobDetails.other : '无'
    }]
  }
])

</script>

<style lang="scss" scoped>
.jobDetailsTable {
  border-top: .2667rem solid $color-bg;
  padding-bottom: .2667rem;

  &_box {

    :deep(.van-tabs__wrap) {
      border-bottom: 1px solid #f8f8f8;
      padding: .16rem 0;
      background-color: #fff;
    }

    :deep(.van-tab) {
      font-size: .4rem;
    }

    &_item {
      padding: .2667rem;

      &:first-child {
        padding-top: .5333rem;
      }

      &_title {
        width: 100%;
        font-size: .4rem;
        font-weight: bold;
        color: #333;
        padding: .4rem 0;
        @include flexCenterCenter();
        background-color: $color-bg;
        border-radius: .16rem .16rem 0 0;
      }

      &_table {
        border-radius: 0 0 .16rem .16rem;
        overflow: hidden;
        border: 1px solid #f3f3f3;
        border-top: none;
        box-sizing: border-box;

        &_list {
          display: flex;
          border-bottom: 1px solid #f3f3f3;
          line-height: 1.5;

          &:last-child {
            border-bottom: none;
          }

          &_left {
            font-size: .3733rem;
            padding: .4rem;
            color: #666;
          }

          &_right {
            flex: 1;
            font-size: .3733rem;
            color: #333;
            padding: .4rem;
            text-align: justify;
          }
        }
      }
    }
  }
}
</style>